<template>
  <div class="myText">
    <el-tooltip :content="text"
                :disabled="dialogFormDisabled"
                class="myForm-item"
                effect="dark"
                placement="top-start"
    >
      <div class="myForm-tooltip" ref="tooltip">
        <span ref="tooltipSpan">{{content}}</span>
      </div>
    </el-tooltip>
  </div>
</template>

<script>

  export default {
    name: 'myText',
    props: {
      //当前组件绑定值
      content: {
        type: [String, Number],
        require: true
      },
      //tooltip是否禁用
      disabled: {
        type: Boolean,
        default() {
          return false;
        }
      }
    },
    computed: {
      text() {
        let data = '';
        if (this.content) {
          data = this.content.toString();
        }
        return data;
      }
    },
    data() {
      return {dialogFormDisabled: true}
    },
    created() {
    },
    mounted() {
      this.$nextTick((vm) => {
        // DOM 更新了
        //用于判断tooltip是否启用，当内容大于限度框90%的时候会启用
        const tooltip = this.$refs.tooltip;
        const tooltipSpan = this.$refs.tooltipSpan;
        if (tooltip && tooltipSpan && !this.disabled) {
          if (tooltipSpan.offsetWidth >= tooltip.offsetWidth * 0.9) {
            this.dialogFormDisabled = false;
          }
        }
      });
    }
  }
</script>

<style lang="scss">
  .myForm-tooltip {
    display: block;
    width: 90%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding-left: 8px;
  }
</style>
